<template>
  <div class="category">
    <form action="/">
      <van-search
        shape="round"
        placeholder="请输入搜索关键词"
        class="searchbox"
      />
    </form>
    <div>
      <div class="sideBar">
        <ul>
          <!-- 侧边栏 -->
          <li
            v-for="(item, index) in tabList"
            :key="item.id"
            @click="tabEvents(index)"
            :class="index == selectIndex ? 'active' : ''"
          >
            {{ item.name }}
          </li>
        </ul>
      </div>

      <div class="bannerimg"><img :src="imgSrc" alt="" /></div>
      <p class="bannertitle">{{ banner }}分类</p>
      <ul class="goodsList">
        <router-link
          tag="li"
          :to="`/category/list?id=${item.id}`"
          v-for="item in child"
          :key="item.id"
          class="goodsList-c"
        >
          <img :src="item.wap_banner_url" alt="" />
          <p>{{ item.name }}</p>
        </router-link>
      </ul>
    </div>
  </div>
</template>

<script>
import { indexaction, currentaction } from "@/api/category";
export default {
  data() {
    return {
      tabList: [],
      selectIndex: 0,
      child: [],
      banner: "居家",
      imgSrc:
        "http://yanxuan.nosdn.127.net/f4ff8b3d5b0767d4e578575c1fd6b921.jpg",
    };
  },
  methods: {
    async tabEvents(index) {
      this.selectIndex = index;
      //获取当前展示的二级标题数据
      var result = await currentaction({
        id: this.tabList[this.selectIndex].id,
      });
      console.log(result);
      console.log(result.data.currentOne.name);
      this.child = result.data.currentOne.subList;
      this.banner = result.data.currentOne.name;
      this.imgSrc = result.data.currentOne.banner_url;
    },
  },
  async created() {
    var res = await indexaction();
    console.log(res);
    this.tabList = res.categoryList;

    // ajax异步
    var result = await currentaction({
      id: this.tabList[this.selectIndex].id,
    });
    // console.log(result);
    this.child = result.data.currentOne.subList;
  },
};
</script>

<style lang="scss" scoped>
@import "./scss/index.scss";
.category {
  .bannerimg {
    width: 546px;
    height: 217px;
    margin-left: 200px;

    img {
      width: 100%;
    }
  }
  .bannertitle {
    margin-left: 400px;
    margin-bottom: 30px;
    font-size: 30px;
    color: #333333;
    letter-spacing: 0;
    font-weight: 500;
  }
  .sideBar {
    width: 164px;
    position: fixed;
    left: 0;
    top: 119px;
    background-color: #fff;
    z-index: 1;
    li {
      margin: 0px 0px 64px 56px;
      font-size: 30px;
      color: #333333;
      font-weight: 400;
    }
    .active {
      color: #cea62a;
    }
  }
  .goodsList {
    margin-left: 212px;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;

    .goodsList-c {
      text-align: center;
      margin-left: 25px;
      margin-bottom: 110px;
      img {
        width: 137px;
        height: 137px;
      }
      p {
        font-size: 24px;
        color: #333333;
        letter-spacing: 0;
      }
    }
  }
}
</style>